<template>
  <div>
    <el-row>
      <el-form :model="yardform"
               status-icon
               ref="yardform"
               :rules="rules"
               label-width="115px">
        <el-form-item label="堆场名称"
                      prop="name">
          <el-input v-model="yardform.name"
                    :disabled="type===1?true:false"
                    class="yard-input"></el-input>
        </el-form-item>
        <el-form-item label="堆场长度(mm)"
                      prop="length">
          <el-input v-model="yardform.length"
                    :disabled="type===1?true:false"
                    class="yard-input"></el-input>
        </el-form-item>
        <el-form-item label="堆场宽度(mm)"
                      prop="width">
          <el-input v-model="yardform.width"
                    :disabled="type===1?true:false"
                    class="yard-input"></el-input>
        </el-form-item>
        <el-form-item label="堆场示意图"
                      prop="img">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     name="pic_file_apk"
                     accept=".png,.jpg,.jpeg"
                     :http-request="uploadFile"
                     :disabled="type===1?true:false"
                     :on-success="handleAvatarSuccess">
            <img v-if="yardform.img"
                 :src="yardform.img"
                 class="avatar"
                 style="width:100%;height:100%;">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-col :span="24"
              v-if="type==1?false:true"
              style="text-align:center;margin-bottom:20px;margin-top:-20px;">
        <el-button type="primary"
                   @click="submitData('yardform')"
                   :disabled="btnLimit">确 定</el-button>
        <el-button @click="resetForm('yardform')">取 消</el-button>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { factoryYardApi } from '@/services/ProjectCenter';
import { UploadFileApi } from '@/services/UserPermission';
export default {
  props: {
    todos: Number,
    catchBack: Function,
    catchSave: Function,
    rowObj: Object,
    type: Number
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入堆场名称'))
      } else {
        callback()
      }
    }
    var checkImg = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请上传图片'))
      } else {
        callback()
      }
    }
    var checkLength = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入堆场长度'))
      } else if (!(/^\d+$|^\d*\.\d+$/g).test(value)) {
        callback(new Error('请输入正确的堆场长度'))
      } else {
        callback()
      }
    }
    var checkWidth = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入堆场宽度'))
      } else if (!(/^\d+$|^\d*\.\d+$/g).test(value)) {
        callback(new Error('请输入正确的堆场宽度'))
      } else {
        callback()
      }
    }
    return {
      btnLimit: false,
      yardState: '',
      yardform: {// 弹窗表单
        name: '',
        length: '',
        width: '',
        img: '',
        id: ''
      },
      rules: {
        name: [
          { validator: checkName, trigger: 'blur', required: true }
        ],
        length: [
          { validator: checkLength, trigger: 'blur', required: true }
        ],
        width: [
          { validator: checkWidth, trigger: 'blur', required: true }
        ],
        img: [
          { validator: checkImg, trigger: 'change', required: true }
        ]
      },
    }
  },
  methods: {
    // 上传图片成功的钩子
    handleAvatarSuccess (res, file) {
      this.yardform.img = URL.createObjectURL(file.raw)
    },
    // 上传图片
    uploadFile (params) {
      var moduleName = 'yard'
      var formData = new FormData()
      formData.append('pic_file_apk', params.file)
      formData.append('module', moduleName)
      UploadFileApi.uploadFile(
        { data: formData }
      ).then(res => {
        if (res.code == 0) {
          this.yardform.img = res.data.file_path;
          this.file_name = res.data.file_name;
        }
      }, err => {
        console.log(err)
      })
    },
    // 关闭弹窗重置表单
    resetForm (yardform) {
      this.catchBack('SUCCESS');
      this.$refs[yardform].resetFields();
    },
    // 提交弹窗的数据
    submitData (yardform) {
      if (this.type === 1) {
        //this.yardVisible = false
      } else if (this.type === 2) {
        if (this.type == 2) {
          this.$refs[yardform].validate((valid) => {
            if (valid) {
              this.btnLimit = true
              factoryYardApi.editYard({
                data: {
                  id: this.yardform.id,
                  name: this.yardform.name,
                  length: this.yardform.length,
                  width: this.yardform.width,
                  img: this.yardform.img
                }
              }).then(res => {
                if (res.code == 0) {
                  this.catchSave('SUCCESS');
                  this.$message.success('修改成功');
                  this.btnLimit = false;
                } else {
                  this.btnLimit = false
                }
              })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
      } else {
        if (this.type == 3) {
          this.$refs[yardform].validate((valid) => {
            if (valid) {
              this.btnLimit = true
              if (this.$route.query.projects) {
                factoryYardApi.addYard({
                  data: {
                    name: this.yardform.name,
                    length: this.yardform.length,
                    width: this.yardform.width,
                    img: this.yardform.img,
                    project_id: this.requestParam.project_id
                  }
                }).then(res => {
                  if (res.code == 0) {
                    this.catchSave('SUCCESS');
                    this.$message.success('添加成功');
                    this.btnLimit = false;
                    this.$refs[yardform].resetFields();
                  } else {
                    this.btnLimit = false
                  }
                })
              } else {
                factoryYardApi.addYard({
                  data: {
                    name: this.yardform.name,
                    length: this.yardform.length,
                    width: this.yardform.width,
                    img: this.yardform.img
                  }
                }).then(res => {
                  if (res.code == 0) {
                    this.catchSave('SUCCESS');
                    this.$message.success('添加成功');
                    this.$refs[yardform].resetFields();
                    this.btnLimit = false;
                  } else {
                    this.btnLimit = false;
                  }
                })
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }

      }
    },
    getEditYard () {
      factoryYardApi.getYardDetail({
        data: {
          id: this.rowObj.id
        }
      }).then(res => {
        this.yardform.name = res.data.name;
        this.yardform.length = res.data.length;
        this.yardform.width = res.data.width;
        this.yardform.img = res.data.img;
        this.yardform.id = this.rowObj.id;
      })
    }
  },
  watch: {
    todos (n, o) {
      if (n == 1) {
        if (this.type == 1 || this.type == 2) {
          this.getEditYard()
        }
      } else {
        this.yardform.name = '';
        this.yardform.length = '';
        this.yardform.width = '';
        this.yardform.img = '';
        this.yardform.id = '';
      }

      console.log('watch-rowObj=', this.rowObj, 'todos=', this.todos, 'type=', this.type)
    }
  },
  created () {
    if (this.type == 1 || this.type == 2) {
      this.getEditYard()
    }
    console.log('created-rowObj=', this.rowObj, 'todos=', this.todos, 'type=', this.type)
  }
}
</script>

<style lang="scss" scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 178px;
  height: 178px !important;
  width: 178px !important;
}
</style>
